<template>
  <el-dialog
    :title="form.typeId ? '修改设备类型' :'新增设备类型'"
    :visible.sync="visible"
    @close="close"
    @open="open"
  >
    <el-form ref="dialogform" :model="form" :rules="rules">
      <!--  -->

      <el-form-item label="型号名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入" style="text-align:center"></el-input>
      </el-form-item>
      <!--  -->
      <el-form-item label="型号编码：" prop="model">
        <el-input v-model="form.model" placeholder="请输入（限制数字、字母、中划线、下划线）" style="text-align:center"></el-input>
      </el-form-item>
      <!--  -->
      <el-form-item label="货道行数：" prop="vmRow">
        <el-input
          class="centerpler"
          v-model="form.vmRow"
          placeholder="请输入"
          style="text-align:center"
          @blur="blur($event)"
        >
          <template #append>
            <div class="appenddiv">
              <button class="btnnn" :disabled="form.vmRow > 9" @click="addvmrow">△</button>
              <button class="btnnn" :disabled="form.vmRow < 2" @click="subvmrow">▽</button>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <!--  -->
      <el-form-item label="货道列数：" prop="vmCol">
        <el-input
          class="centerpler"
          v-model="form.vmCol"
          placeholder="请输入"
          style="text-align:center"
          @blur="blur($event)"
        >
          <template #append>
            <div class="appenddiv">
              <button class="btnnn" :disabled="form.vmCol > 9" @click="addvmCol">△</button>
              <button class="btnnn" :disabled="form.vmCol< 2" @click="subvmCol">▽</button>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <!--  -->
      <el-form-item label="货道容量：" prop="channelMaxCapacity">
        <el-input
          class="centerpler"
          v-model="form.channelMaxCapacity"
          placeholder="请输入"
          @blur="blur($event)"
        >
          <template #append>
            <div class="appenddiv">
              <button
                class="btnnn"
                :disabled="form.channelMaxCapacity > 9"
                @click="addchannelMaxCapacity"
              >△</button>
              <button
                class="btnnn"
                :disabled="form.channelMaxCapacity < 2"
                @click="subchannelMaxCapacity"
              >▽</button>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <!--  -->
      <!-- 设备图片 -->
      <el-form-item label="设备图片：" label-width="120px" prop="image">
        <el-upload
          class="avatar-uploader"
          action
          :http-request="getFileUpload"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.image" :src="form.image" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!--  -->
        <div>支持扩展名：jpg、png，文件不得大于100kb</div>
      </el-form-item>
      <!--  -->
    </el-form>
    <div>
      <el-button>取 消</el-button>
      <el-button type="primary" @click="submittt">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import moment form 'moment'
// 引入接口
import { getnewvmtype, FileUpload, updateVmType } from '@/api/vm'
export default {
  name: 'EmperorKedeTypedialog',
  props: {
    // visible: {
    //   type: Boolean,
    //   default: false,
    //   required: true
    // }
  },
  data () {
    return {
      visible: false,
      form: {
        channelMaxCapacity: null,
        name: null,
        model: null,
        image: '',
        vmCol: null,
        vmRow: null
      },
      rules: {
        channelMaxCapacity: [
          {
            required: true,
            message: '请输入',
            trigger: ['input', 'change', 'blur']
          },
          { pattern: /^\d(\d)?$/, message: '请输入', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入', trigger: ['input', 'change'] }
        ],
        model: [
          { required: true, message: '请输入', trigger: ['input', 'change'] },
          {
            pattern: /^[A-Za-z0-9_( )]+$/,
            message: '请输入合法的型号编码',
            trigger: ['input', 'change', 'blur']
          }
        ],

        vmCol: [
          {
            required: true,
            message: '请输入',
            trigger: ['input', 'change', 'blur']
          },
          { pattern: /^\d(\d)?$/, message: '请输入', trigger: 'change' }
        ],
        vmRow: [
          {
            required: true,
            message: '请输入',
            trigger: ['input', 'change', 'blur']
          },
          { pattern: /^\d(\d)?$/, message: '请输入', trigger: 'change' }
        ],
        image: [
          { required: true, message: '请上传', trigger: ['input', 'change'] }
        ]
      }
    }
  },

  mounted () {
    // console.log(this.form)
  },

  methods: {
    addvmrow () {
      this.form.vmRow += 1
    },
    subvmrow () {
      this.form.vmRow -= 1
    },
    addvmCol () {
      this.form.vmCol += 1
    },
    subvmCol () {
      this.form.vmCol -= 1
    },
    addchannelMaxCapacity () {
      this.form.channelMaxCapacity += 1
    },
    subchannelMaxCapacity () {
      this.form.channelMaxCapacity -= 1
    },
    async submittt () {
      try {
        await this.$refs.dialogform.validate()
        if (!this.form.typeId) {
          const res = await getnewvmtype(this.form)
          console.log(res)
          // 关闭弹出框
          this.visible = false
          // 通知父组件
          this.$emit('shuaxin')
        } else {
          const res = await updateVmType(this.form)
          console.log(res)
          this.$message({ type: 'success', message: '修改成功' })
          // 关闭弹出框
          this.visible = false
          // 通知父组件
          this.$emit('shuaxin')
        }
      } catch (error) {
        console.dir(error)// 控制台显示对象参数;
        this.$message({ type: 'error', message: error.response.data })
      }
    },
    // 输入框失去焦点做判断
    blur (e) {
      // console.log(e.target.value)
      if (e.target.value > 10) {
        console.log(typeof e.target.value)
        e.target.value = 10
      }
      // 定义正则
      const RegExp = /^\d+$/
      if (RegExp.test(e.target.value) === false) {
        e.target.value = null
      }
    },
    // 按钮点击添加
    add (e) {
      e.target.value += 1
    },
    // 按钮点击减少
    sub (e) {
      e.target.value -= 1
    },
    // 窗口关闭时的回调
    close () {
      this.visible = false
      this.$refs.dialogform.resetFields()
      this.form.channelMaxCapacity = null
      this.form.name = null
      this.form.model = null
      this.form.vmCol = null
      this.form.vmRow = null
      // this.form.channelMaxCapacity = null
    },
    // 图片上传
    async getFileUpload (file) {
      console.log(file)
      console.log(file.file)
      const formData = new FormData()
      formData.append('fileName', file.file)
      console.log(formData)
      const res = await FileUpload(formData)
      console.log(res)
      this.form.image = res.data
      console.log(this.form.image)
      this.$message({ type: 'success', message: '上传图片成功' })
    },
    // 校验图片格式
    beforeAvatarUpload (file) {
      // 获取后缀名
      const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      // 判断是否符合文件大小的限制需求
      const isLt2M = file.size / 1024 / 1024 < 0.1
      // 判断是否符合文件类型需求
      const accept = 'jpg/png'
      const isLtType = accept.indexOf(suffix) >= 0
      if (!isLtType) {
        this.$message({
          message: `上传文件格式必须为${accept}`,
          type: 'warning'
        })
      }
      if (!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过100KB!',
          type: 'warning'
        })
      }
    },
    // 打开时的回调
    open () {
      console.log(this.form)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog {
  width: 33%;
  .el-input__inner {
    width: 396px;
    height: 36px;
  }
  // input::-webkit-input-placeholder {
  //   padding-left: 45%;
  //   opacity: 0.5;
  // }
  .centerpler ::-webkit-input-placeholder {
    padding-left: 45%;
    opacity: 0.5;
  }
}
/deep/ .el-dialog__body {
  .el-form-item {
    display: flex;
  }
}
.appenddiv {
  display: flex;
  flex-direction: column;
  margin-left: -20px;
  /deep/ .btnnn {
    background-color: pink;
    width: 40px;
    height: 18px;
  }
}
/deep/ .el-input-group__append {
  background-color: #fff;
  width: 40px !important;
  border: 0ch;
}
//
//
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
